<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('告警设置')"/>
    <style>
        .checkbox {
            width: 40px;
            height: 40px;
            /*background: #ddd;*/
            /*border-radius: 100%;*/
            position: relative;
        }

        .checkbox label {
            display: block;
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 100%;
            transition: all .2s ease;
            cursor: pointer;
            top: 7px;
            left: 7px;
            z-index: 1;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .5);
            /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5),*/
            /*0 1px 3px rgba(0, 0, 0, .5);*/
        }

        .checkbox input[type=checkbox]:checked + label {
            background: rgb(41, 180, 41);;
        }

        .checkbox input[type=checkbox] {
            display: none;
        }

        input, select {
            height: 40px;
            width: 100%;
            border: 1px solid #e5e6e7;
            border-radius: 4px;
            /* outline: none; */
            font-size: 15px;
        }

        th, td, input {
            text-align: center;
            padding: 0;
            margin: 0;
        }

        select {
            height: 40px !important;
            margin: 0 !important;
            text-align: center;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated ibox-content">
    <form class="form-horizontal m" id="form-boat-add">
        <input name="boatId" th:value="${boat.id}" type="hidden">
        <input name="boatCode" th:value="${boat.code}" type="hidden">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th width="40">
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox-all">
                        <label for="checkbox-all"></label>
                    </div>
                </th>
                <th width="150">告警类型</th>
                <th width="80">比特位</th>
                <th width="220">开关量类型</th>
                <th>告警数值</th>
                <th width="120">数值单位</th>
            </tr>
            </thead>
            <tbody>

            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox-timeout">
                        <label for="checkbox-timeout"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="1" selected>超时</option>
                    </select>
                </td>
                <td>-</td>
                <td>-</td>
                <td><input type="number" id="input-timeout"></td>
                <td>分钟</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox-over-speed">
                        <label for="checkbox-over-speed"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="2" selected>超速</option>
                    </select>
                </td>
                <td>-</td>
                <td>-</td>
                <td><input type="number" id="input-over-speed"></td>
                <td>米/秒</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox-low-battery">
                        <label for="checkbox-low-battery"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="3" selected>低电量</option>
                    </select>
                </td>
                <td>-</td>
                <td>-</td>
                <td><input type="number" id="input-low-battery"></td>
                <td>%</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox-too-close">
                        <label for="checkbox-too-close"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="4" selected>恶意靠近</option>
                    </select>
                </td>
                <td>-</td>
                <td>-</td>
                <td><input type="number" id="input-too-close"></td>
                <td>米</td>
            </tr>


            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox0">
                        <label for="checkbox0"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>0</td>
                <td>
                    <select name="type0" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox1">
                        <label for="checkbox1"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>1</td>
                <td>
                    <select name="type1" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox2">
                        <label for="checkbox2"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>2</td>
                <td>
                    <select name="type2" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox3">
                        <label for="checkbox3"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>3</td>
                <td>
                    <select name="type3" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox4">
                        <label for="checkbox4"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>4</td>
                <td>
                    <select name="type4" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox5">
                        <label for="checkbox5"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>5</td>
                <td>
                    <select name="type5" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox6">
                        <label for="checkbox6"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>6</td>
                <td>
                    <select name="type6" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>
            <tr style="display: none">
                <td>
                    <div class="checkbox">
                        <input type="checkbox" id="checkbox7">
                        <label for="checkbox7"></label>
                    </div>
                </td>
                <td>
                    <select name="type" class="form-control m-b" disabled>
                        <option value="0" selected>开关量</option>
                    </select>
                </td>
                <td>7</td>
                <td>
                    <select name="type7" class="form-control m-b" th:with="type=${@dict.getType('sys_alert_bit_type')}">
                        <option value="-1">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictValue + ' - ' + dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </td>
                <td>1</td>
                <td>-</td>
            </tr>

            </tbody>
        </table>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    $.get('/boat/alert/get', {
        boatId: $('input[name=boatId]').val()
    }, res => {
        if (res.code === 0) {
            let alerts = res.rows;
            for (let i = 0; i < alerts.length; i++) {
                let alert = alerts[i];
                if (alert.type === 0) { // 开关量
                    $('#checkbox' + alert.bit).prop('checked', true)
                    $(`select[name=type${alert.bit}]`).val(alert.bitType)
                } else { //  超时 超速
                    let keys = ['', 'timeout', 'over-speed', 'low-battery', 'too-close']
                    if (alert.type >= keys.length) continue
                    let key = keys[alert.type]
                    $('#input-' + key).val(alert.value)
                    $('#checkbox-' + key).prop('checked', true)
                }
            }
        }
    })


    var prefix = ctx + "boat/boat"
    $("#form-boat-add").validate({
        focusCleanup: true
    });

    $('#checkbox-all').change(function () {
        console.log($(this).prop('checked'))
        $('input[type=checkbox]').prop('checked', $(this).prop('checked'))
    })

    function submitHandler() {
        let boatId = $('input[name=boatId]').val();
        let boatCode = $('input[name=boatCode]').val();
        let alerts = []
        let msg
        $('tbody').find('tr').each(function () {
            var checked = $(this).find('input[type=checkbox]').prop('checked');
            if (checked) {
                var type = $(this).find('td:eq(1)').find('select').val();
                var bit = $(this).find('td:eq(2)').html();
                var bitType = $(this).find('td:eq(3)').find('select').val();
                var value = $(this).find('td:eq(4)').html();
                if (type != 0) {
                    value = parseInt($(this).find('td:eq(4) input').val());
                    bit = null;
                    bitType = null;
                }

                if (type == 0 && bitType < 0) {
                    msg = '请选择开关量类型'
                    return
                }

                if (value == null || isNaN(value) || value <= 0) {
                    msg = '请填写正确的告警值'
                    return;
                }
                alerts.push({boatId, boatCode, type, bit, bitType, value})
            }

        })
        if (msg) {
            return layer.msg(msg, {icon: 2})
        } else {
            $.operate.save(prefix + "/alert", JSON.stringify({
                boatId,
                boatCode,
                alerts
            }), null, 'application/json;charset=UTF-8');
        }
    }
</script>
</body>
</html>